<template>
  <div class="listPage">
    <div class="fixedTop">
      <div class="searchLeft">
        <!-- <Search :searchForm="searchForm" @search="search" @resetData="resetData"></Search> -->
     <div class="search-bar">
        <el-form
      inline
      label-position="right"
      label-width="90px"
      ref="seachRef"
      :model="searchData"
    >
        <template>
            <el-form-item prop="name"> 
              <el-input
                v-model.trim="searchData.name"
                placeholder="司机姓名" >
              </el-input>
            </el-form-item>

            <el-form-item  prop="mobile"> 
              <el-input
                v-model.trim="searchData.mobile"
                placeholder="司机手机号">
              </el-input>
            </el-form-item>
        
            <el-form-item prop="status">
              <el-select
              
              v-model="searchData.status"
              placeholder="选择状态"
            >
              <el-option
                v-for="(option, index) in status_vo"
                :key="option.label + '' + index"
                :label="option.label"
                :value="option.value"
                :disabled="option.disabled"
              >
              </el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="source">
              <el-select
              
              v-model="searchData.source"
              placeholder="选择来源"
            >
              <el-option
                v-for="(option, index) in source_vo"
                :key="option.label + '' + index"
                :label="option.label"
                :value="option.value"
                :disabled="option.disabled"
              >
              </el-option>
              </el-select>
            </el-form-item>
          
        </template>
        <!-- <el-col :span="6" class="search-cont"> -->
          <el-button
            class="btnAc btnSearch"
            @click="search"
            >查询</el-button
          >
        <!-- </el-col> -->
        <el-button class="btnNo btnReset" size="default" @click="resetData">重置</el-button>
        
      <!-- </el-row> -->
    </el-form>

      </div>
      </div>

       <div class="btnRight">
        <el-button class="btnAc btnAdd" type="primary" size="default"  @click="todetail">录入司机</el-button>
      </div>
    </div>


    <div class="listTableBox">
      <el-card class="tableBox" :body-style="{ padding: '0' }">
        <Table class="tabBtn" :table_config="table_config"  v-loading="isLoading">

          <template v-slot:status="slotData">
            <span>{{slotData.data.status.description}}</span>
          </template>

          <template v-slot:source="slotData">
            <span v-if="slotData.data.source=='ONESELF'">自建</span>
            <span v-if="slotData.data.source=='SHARE'">共享</span>
          </template>

          <template v-slot:operation="slotData">
            <div class="btnDiv">
              
              <span class="spanBtn" v-if="slotData.data.status.value=='ACTIVATED_WAIT' && slotData.data.status.belong=='PRIVATE_DETAIL'" @click="setCode(slotData.data)">填写<br>验证码</span>
              <span class="spanBtn" v-if="slotData.data.status.value=='ACTIVATED_FAIL'&& slotData.data.status.belong=='PRIVATE_DETAIL'" @click="setCode(slotData.data)">重新填写<br>验证码</span>
              <span class="spanBtn" v-if="slotData.data.status.value=='CONTRACT_FAIL' && slotData.data.status.belong=='PRIVATE_DETAIL'" @click="openInvite(slotData.data)">重新邀请签约</span>
              <template v-if="slotData.data.status.value=='NO_SUBMIT' && slotData.data.status.belong=='PRIVATE_DETAIL' || slotData.data.status.value=='APPROVE_FAIL' && slotData.data.status.belong=='PRIVATE_DETAIL'">
                <span class="spanBtn" @click="submitInfo(slotData.data)">提交</span>
                <span class="spanBtn" @click="editInfo(slotData.data)">修改</span>
              </template>
              <span v-else class="spanBtn" @click="watchInfo(slotData.data)">查看</span>

              <!-- <span class="spanBtn" @click="bindCard(slotData.data)">重新绑卡</span> -->
              <!-- <span class="spanBtn">请填写验证码</span> -->
            </div>
            
          </template>
        </Table>
        <div class="divPage">
          <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentpage.page"
          :page-sizes="[2, 5, 6, 10]"
          :page-size="currentpage.per_page"
          layout="total, sizes, prev, pager, next"
          :total="totalNum">
        </el-pagination>
      </div>
      </el-card>
    </div>

    <!-- 签约dialog -->
    <!-- <el-dialog class="dialogCom" title="合同日期" :visible.sync="qyCode" width="520px" > 
      <div class="dialogInfo">
        <div>
          <p><span>姓名：</span><i>{{cadrDialog.name}}</i></p>
          <p><span>身份证号：</span><i>{{cadrDialog.identification}}</i></p>
        </div>
      </div>
      <div class="dialogFooter">
        <div>
          <el-form :model="qyForm" ref="qyRef" :rules="qyRules"  label-width="107px" >
             <el-form-item label="合同到期时间"  prop="end_time">
              <el-date-picker
                v-model="qyForm.end_time"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择日期">
              </el-date-picker>
            </el-form-item>
          </el-form>
          <div class="dialogBtn">
            <el-button class="btnNo btns" @click="cancelQyCode('qyRef')">取消</el-button>
            <el-button class="btnAc btns" @click="saveQyCode">确定</el-button>
          </div>
        </div>
      </div>
    </el-dialog> -->



    <!-- 获取验证码dialog -->
    <el-dialog class="dialogCom" title="填写验证码" :visible.sync="yxCode" width="520px" > 
      <div class="dialogInfo">
        <div>
          <p><span>姓名：</span><i>{{cadrDialog.name}}</i></p>
          <p><span>身份证号：</span><i>{{cadrDialog.identification}}</i></p>
        </div>
      </div>
      <div class="dialogFooter">
        <div>
          <el-form :model="yzForm" ref="yzRef" :rules="yzRules"  label-width="107px" >
             <!-- <el-form-item label="合同到期时间"  prop="end_time">
              <el-date-picker
                v-model="yzForm.end_time"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择日期">
              </el-date-picker>
            </el-form-item> -->

            <el-form-item label="验证码"  prop="captcha">
              <el-input v-model.trim="yzForm.captcha" placeholder="请填写验证码">
                <i slot="suffix" v-show="codeShow" class="codeYz" @click="getCode">重新获取验证码</i>
                <i slot="suffix" v-show="!codeShow" class="codeYz">{{count}}s后重新发送</i>
              </el-input>
              <p class="yzTip">填写手机号{{cadrDialog.driver_bank.mobile}}收到的验证码</p>
            </el-form-item>
           
          </el-form>
          <div class="dialogBtn">
            <el-button class="btnNo btns" @click="cancelYzCode('yzRef')">取消</el-button>
            <el-button class="btnAc btns" @click="saveYzCode">确定</el-button>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 重新绑卡dialog -->
    <el-dialog class="dialogCom" title="重新绑卡" :visible.sync="cardDialog" width="620px" > 
      <div class="dialogInfo">
        <div>
          <p><span>姓名：</span><i>{{cadrDialog.name}}</i></p>
          <p><span>身份证号：</span><i>{{cadrDialog.identification}}</i></p>
        </div>
        <div>
          <p><span>已绑卡号：</span><i>{{cadrDialog.driver_bank.card_number}}</i></p>
          <p><span>银行预留手机号：</span><i>{{cadrDialog.driver_bank.mobile}}</i></p>
        </div>
      </div>
      <div class="dialogFooter">
        <div>
          <el-form :model="cardData" ref="cardRef" :rules="cardRules"  label-width="122px" >
            <el-form-item label="银行卡号"  prop="cardNumber">
              <el-input v-model.trim="cardData.cardNumber" placeholder="请填写新卡卡号"></el-input>
            </el-form-item>
            <el-form-item label="银行预留手机号" prop="cardPhone">
              <el-input v-model.trim="cardData.cardPhone" placeholder="请输入新卡银行预留手机号" ></el-input>
            </el-form-item>
          </el-form>
          <div class="dialogBtn">
            <el-button class="btnNo btns" @click="cancelBind('cardRef')">取消</el-button>
            <el-button class="btnAc btns" @click="savaCard">保存</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Table from "@/components/Table.vue";
import Search from '@/components/Search.vue';
export default {
  components: { Table, Search },
  data () {
    return {
      
      source_vo: [
        {
          value: "ONESELF",
          label: "自建"
        },
        {
          value: "SHARE",
          label: "共享"
        },
      ],
      status_vo: [
        {
          value: "NO_SUBMIT",
          label: "未提交"
        },
        {
          value: "ACTIVATED_WAIT",
          label: "待激活"
        },
        {
          value: "ACTIVATED_FAIL",
          label: "激活失败"
        },
        {
          value: "APPROVE_ING",
          label: "审核中"
        },
        {
          value: "APPROVE_FAIL",
          label: "审核驳回"
        },
        {
          value: "CONTRACT_ING",
          label: "签约中"
        },
        {
          value: "CONTRACT_FAIL",
          label: "签约失败"
        },
        {
          value: "VERIFY_SUCCESS",
          label: "已验证"
        },
      ],
      
      searchData:{
        mobile:'',
        name:'',
        source:'',
        status:''
      },
      table_config: {   //表格数据
        tableHead: [
          { label: "司机ID", prop: "cid" },
          { label: "姓名", prop: "name", width:'100px' },
          { label: "ID", prop: "id" },
          { label: "身份证号", prop: "identification" },
          { label: "常用车辆", prop: "truck" },
          { label: "联系电话", prop: "mobile" },
          { label: "收款信息", prop: "driver_bank.card_number"  },
          { label: "录入时间", prop: "create_time", width:'100px'},
          { label: "信息来源", prop: "source",columnType:"slot",slotName:"source" },
          { label: "状态", prop:"status",columnType:"slot",slotName:"status"},
          { label: "操作", columnType:"slot",slotName:"operation"}
        ],
        tableData:[],
        checkbox: false, //表格复选框是否显示
      },
      totalNum:0,    //总条目
      currentpage:{
        page:1,   //当前页
        per_page:10,   //每页条数
      },

      isLoading:true,    //loading
      cardDialog:false,    //重新绑卡弹框
      yxCode:false,    //获取验证码弹框
      qyCode:false,    //签约弹框
      searchKey:'',     //搜索data
      cardData:{      //重新绑卡data
        cardNumber:'' ,
        cardPhone:''
      },
      captcha:'123',
      cardRules:{
        cardNumber:[
          { required: true, message: '请填写新卡卡号', trigger: 'blur' },
          { pattern: /^\d{8,32}$/,message: '请输入正确的银行卡号', trigger: 'blur'}
        ],
        cardPhone:[
          { required: true, message: '请输入新卡银行预留手机号', trigger: 'blur' },
          { pattern: /^1[3|4|5|7|8][0-9]{9}$/, message: "请输入正确手机号", trigger: "blur"}
        ]
      },
      yzForm:{
        captcha:'',
        end_time:'',
      },
      // qyForm:{
      //   captcha:'',
      //   end_time:'',
      // },
      qyRules:{
        end_time:[
          { required: true, message: '请选择合同到期时间', trigger: 'change'}
        ],
      },
      yzRules:{
        captcha:[
          { required: true, message: '请填写验证码', trigger: 'blur' },
        ],
        end_time:[
          { required: true, message: '请选择合同到期时间', trigger: 'change'}
        ],
      },
      cadrDialog:{
        id:'',
        identification:'',
        name:'',
        driver_bank:{
          card_number:'',
          mobile:'',
        }
      },
      count:'',
      codeShow:true,
      timer:null,
    };
  },
  created () {
    this.getMenuList(this.currentpage);
  },
  mounted () {
    document.getElementsByClassName("el-pagination__total")[0].childNodes[0].nodeValue = "共 "+this.totalNum+' 位司机';
  },
  methods: {
    // 打开重新绑卡dialog
    bindCard(val){
      this.cadrDialog=val
      console.log(val);
      this.cardDialog=true
      this.$nextTick(function(){
	      this.$refs.cardRef.resetFields();
	    })
    },
    //提交信息
    submitInfo(val){
      const data={
        captcha:'',
        end_time:'',
      }
      this.$http.companyApi.subDriInfo(val.id,data).then(res => {
        if(res.status == 200){
          console.log(res);
          this.$router.go(0);
        }
        
      })
    },
   
    // 取消绑卡
    cancelBind(refsData){
      this.$refs[refsData].resetFields();
      this.cardDialog=false

    },
    // 点击编辑信息
    editInfo(val){
      this.$store.commit('setDriverId', val.id);
      sessionStorage.setItem('driverId',val.id)
      this.$router.push({
        name: 'driverdetail', 
        params: { id: val.id }
      })
    },
    watchInfo(val){
      this.$store.commit('setDriverId', val.id);
      sessionStorage.setItem('driverId',val.id)
      this.$store.commit('lookType', 'drivers');
      sessionStorage.setItem('lookType','drivers')
      this.$router.push({
        name: 'driverdetail', 
        params: { 
          id: val.id,
          type:'drivers'
        }
      })

    },
    // 打开验证码弹框
    setCode(val){
      this.cadrDialog=val
      this.count = 60
      this.getYzCode(val.id,this.count)
      
      this.codeShow = false;
    },
    getCode(){
      this.count = 60
       this.getYzCode(this.cadrDialog.id,this.count)
    },
    cancelYzCode(){
      this.yxCode=false
    },
    saveYzCode(){
      this.$refs.yzRef.validate((valid) => {
        if (valid) {
          this.$http.companyApi.subDriInfo(this.cadrDialog.id,this.yzForm).then(res => {
            if(res.status == 200){
              this.yxCode=false
              this.$message.success("填写验证码成功")
              this.$router.go(0)
            }
          }).catch(err => {
            this.$message.error(err.data.err_msg)
          })
        }else{
          this.$message.error('请填写验证码')
        }
      });
    },

    getYzCode(data,time){
      this.$http.companyApi.yzCode(data).then(res => {
        console.log(res);
        if(res.status == 200){
          if(res.data.value == 'ACTIVATED_FAIL'){
            this.$message.warning(res.data.description)
            this.$router.go(0)
          }else if(res.data.value == 'ACTIVATED_WAIT'){
            console.log(2222);
            this.yxCode=true
              if (!this.timer) {
              this.count = time;
              this.codeShow = false;
              this.timer = setInterval(() => {
                if (this.count > 0 && this.count <= time) {
                    this.count--;
                  } else {
                    this.codeShow = true;
                    clearInterval(this.timer);
                    this.timer = null;
                  }
              }, 1000)
            }
          }
        }
        
      }).catch(err => {
        this.$message.warning("获取验证码失败")
      })
    },
    openInvite(val){
      this.cadrDialog=val
       this.$http.companyApi.invite(val.id).then(res => {
        console.log(res);
        if(res.status == 200){
          this.qyCode=false
          this.$router.go(0)
        }
        
      }).catch(err => {
        this.$message.warning(err.data.err_msg)
      })

      // this.qyCode=true
    },
    //重新邀请签约
    // saveQyCode(){
    //   console.log(111);
    //   this.$refs.qyRef.validate((valid) => {
    //     if(valid){
    //       this.$http.companyApi.invite(this.cadrDialog.id,this.qyForm).then(res => {
    //         console.log(res);
    //         if(res.status == 200){
    //           this.qyCode=false
    //           this.$router.go(0)
    //         }
            
    //       }).catch(err => {
    //         this.$message.warning(err.data.err_msg)
    //       })

    //     }else{
    //       this.$message.warning("请选择签约日期")
    //     }
    //   })
      
    // },



    // 保存重新绑卡数据
    savaCard(){
      this.$refs.cardRef.validate((valid) => {
        if (valid) {
          this.$message.success("保存成功")
          this.cardDialog=false
        } else {
          this.$message.warning("请正确填写信息")
        }
      });
    },
    async getMenuList(params){
      await this.$http.companyApi.companyList(params).then(res => {
        if(res.status == 200){
          this.isLoading=false
          console.log(res);
          console.log(res.data);
          this.table_config.tableData=res.data.result
          this.totalNum = res.data.total_num
        }
      })
    },
    //进入详情页
    todetail(){
      sessionStorage.removeItem('driverId')
      this.$router.push({name:'driverdetail'})
    },
    //重置搜索
    async resetData(){
      this.$refs.seachRef.resetFields();
      this.isLoading=true
      const page={
        page:1,
        per_page:10
      }
      this.getMenuList(page)

    },
    //搜索列表
    search(){
      this.isLoading=true
      this.currentpage.page=1
      const params=Object.assign(this.currentpage, this.searchData);
      this.getMenuList(params)
      
    },
    //当前页发生变化
    handleCurrentChange(val){
      this.isLoading=true
      this.currentpage.page=val
      this.getMenuList(this.currentpage)
    },
    //每页条数发生变化
    handleSizeChange(val){
      this.isLoading=true
      this.currentpage.page=1
      this.currentpage.per_page=val
      this.getMenuList(this.currentpage)
    },
  },
}

</script>

<style scoped>
.btnAdd{
  width: 104px;
}
.listTableBox{
  margin-top: 88px;
  padding:24px;
}
/* 绑定银行卡信息 */
.dialogInfo{
  padding: 0 24px;
}
.dialogInfo p{
  height: 32px;
  line-height: 32px;
}
.dialogInfo p span{
  color: #9AA1B5;
} 
.dialogInfo p i{
  color: #171717;
} 

.dialogInfo div{
  padding: 10px 0;
}
.dialogInfo div:first-of-type{
  border-bottom: 1px solid #F0F1F5;
}
.dialogFooter{
  background: rgba(141, 180, 244, 0.09);
  padding: 18px 24px;
  border-top: 1px solid #DCEAFE;
  }
.btns{
  width: 76px;
}
.dialogBtn{
  text-align: end;
}
.codeYz{
  cursor: pointer;
  color: #2878FF;
  padding-right: 5px;
}
.yzTip{
  font-size: 12px;
  color: #8F92A1;
}
</style>